<template>
    <div id="app">
        <h2 style="display:flex">
            <t-icon name="usergroup-add" style="margin-right:4px;" />
            管理员
        </h2>
        <div class="admin">
            <div class="cover" @click="visibleBody3 = true">
                编辑管理员
            </div>
            <template v-for="(value, index) in admins" :key="index">
                <div class="item">
                    <div style="padding:10px;">
                        <img width="60" height="60" src="https://tdesign.gtimg.com/site/avatar.jpg" alt="">
                    </div>
                    <div
                        style="height:60px;display:felx;flex-direction: column;justify-content:space-around;font-size: 20px;line-height: 1.4;">
                        <div>
                            <t-icon name="user-talk" style="margin-right:4px;" />{{ value.name }}
                        </div>
                        <div style="color:gray;">
                            {{ value.loginTime }}
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <template v-if="admins?.length == 0">
            <div style="padding:20px">
                <t-button theme="primary" @click="visibleBody = true">添加运营者</t-button>
            </div>
        </template>

        <!-- 新增数据输入框 -->
        <t-dialog :footer="false" v-model:visible="visibleBody" attach="body" header="添加运营者"
            :on-confirm="() => (visibleBody = false)">
            <template #body>
                <t-form ref="formValidatorStatus" :data="admin" :rules="rules" @submit="onSubmit" @reset="onReset"
                    @validate="onValidate">
                    <t-form-item label="账号" name="name">
                        <t-input v-model="admin.name" placeholder="请输入账户"></t-input>
                    </t-form-item>
                    <t-form-item label="密码" name="password">
                        <t-input v-model.number="admin.password" placeholder="请输入密码"></t-input>
                    </t-form-item>
                    <t-form-item :status-icon="false">
                        <t-space size="small">
                            <t-button theme="primary" type="submit">提交</t-button>
                            <t-button theme="default" variant="base" type="reset">重置</t-button>
                        </t-space>
                    </t-form-item>
                </t-form>
            </template>
        </t-dialog>

        <t-dialog :footer="false" v-model:visible="visibleBody3" attach="body" header="编辑管理员"
            :on-confirm="() => (visibleBody3 = false)">
            <template #body>
                <t-form ref="formValidatorStatus" :data="admin" :rules="rules" @submit="onSubmit2" @reset="onReset"
                    @validate="onValidate">
                    <t-form-item label="账号" name="name">
                        <t-input v-model="admin.name" placeholder="请输入账户"></t-input>
                    </t-form-item>
                    <t-form-item label="密码" name="password">
                        <t-input v-model.number="admin.password" placeholder="请输入密码"></t-input>
                    </t-form-item>
                    <t-form-item :status-icon="false">
                        <t-space size="small">
                            <t-button theme="success" type="submit">修改</t-button>
                        </t-space>
                    </t-form-item>
                </t-form>
            </template>
        </t-dialog>
    </div>
</template>

<script setup>
import { reactive, ref } from '@vue/reactivity';
import { IconFont } from 'tdesign-icons-vue-next';
import { addAdmin, updateAdmin } from '@/http/modules/user'
import { watch } from '@vue/runtime-core';
import mitt from '@/utils/mitt/index'

const props = defineProps(['admins', "shopid"]);
const visibleBody = ref(false);
const visibleBody3 = ref(false);
const admin = reactive({
    name: "",
    password: "",
    shopid: props?.shopid
})

watch(props, () => {
    admin.name = props?.admins[0].name
    admin.password = props?.admins[0].password
    admin.shopid = props?.shopid
})

// 表单规则
const rules = {
    name: [
        { required: true, message: '账号必填', type: 'error' },
        {
            min: 5,
            message: '账号至少需要5位数',
            type: 'error',
            trigger: 'blur',
        },
    ],
    password: [
        { required: true, message: '密码必填', type: 'error' },
        {
            min: 8,
            message: '密码至少需要8位数',
            type: 'error',
            trigger: 'blur',
        },
    ],
};

const onSubmit = async ({ validateResult, firstError, e }) => {
    e.preventDefault();
    if (validateResult === true) {
        addAdmin(admin).then(res => {
            if (res.code == 200) {
                visibleBody.value = false
                mitt.emit('updateFood')
            }
        })
    } else {
        console.log('Validate Errors: ', firstError, validateResult);
        MessagePlugin.warning(firstError);
    }
};



const onSubmit2 = async ({ validateResult, firstError, e }) => {
    e.preventDefault();
    if (validateResult === true) {
        updateAdmin(admin).then(res => {
            if (res.code == 200) {
                visibleBody3.value = false
                mitt.emit('updateFood')
            }
        })
    } else {
        console.log('Validate Errors: ', firstError, validateResult);
        MessagePlugin.warning(firstError);
    }
};
</script>
 
<style lang="less" scoped>
#app {
    max-height: 350px;
    position: relative;

    .admin {
        position: relative;

        &:hover .cover {
            opacity: 1;
        }

        .cover {
            border-radius: 3px;
            user-select: none;
            cursor: pointer;
            transition: all 0.3s;
            opacity: 0;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            position: absolute;
            left: 0;
            bottom: 0;
            font-weight: 600;
            height: 100px;
            width: 260px;
            background-color: rgba(212, 207, 202, 0.7);
        }
    }

    .item {
        transition: all 1s;
        margin-bottom: 10px;
        padding: 10px;
        display: flex;
        align-items: center;

        &:hover {
            cursor: pointer;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.5);
            // box-shadow: 1px 1px 20px 5px rgba(84, 112, 198, 0.5);
        }
    }

    h2 {
        margin-bottom: 20px;
        color: grey;
        align-items: center;
    }

    padding: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    ;
}
</style>